<template>
	<view>
		<view v-show="temppc">
			<htmlHead :indexdata="indexdata"></htmlHead>
			<view class="bodyt2">
				<el-carousel :interval="5000"
					style="width: 1200px;height: 400px; margin: auto;cursor: pointer;margin-bottom: 20px;">
					<el-carousel-item style="height: 400px;" v-for="(item, index) in newsType.sytw" :key="index">
						<img @click="goDetails(item)" style="width: 1200px;height: 400px;" :src="item.image1">
					</el-carousel-item>
				</el-carousel>
				<view class="bodyt2-1">
					<view class="bodyt2-1-1">
						<view class="bodyt2-1-1-1">
							<view v-for="(item, index) in itemss" :key="index" class="item"
								:class="{ active: isActivee === index }" @click="setActiveee(index)">
								{{ item.text }}
								<view v-if="isActivee === index" class="arrow"></view>
							</view>
						</view>
						<view class="bodyt2-1-1-2">
							<p class="newsp" @click="goDetails(item)" v-for="(item, index) in newsType.tempt1"
								:key="index">
								<span :class="index <3?'layui-badge':'layui-badge2'">{{index+1}}</span>
								{{item.title.substring(0, 20)}}{{item.title.length > 20?'...':''}}
							</p>
							<span v-show="modo1" class="modo" @click="goModo1">更多...</span>
						</view>
					</view>
					<view class="bodyt2-1-1">
						<view class="bodyt2-1-1-1">
							<view v-for="(item, index) in items" :key="index" class="item"
								:class="{ active: isActive === index }" @click="setActivee(index)">
								{{ item.text }}
								<view v-if="isActive === index" class="arrow"></view>
							</view>
						</view>
						<view class="bodyt2-1-1-2">
							<p @click="goDetails(item)" class="newsp" v-for="(item, index) in newsType.tempt2"
								:key="index">
								<span :class="index <3?'layui-badge':'layui-badge2'">{{index+1}}</span>
								{{item.title.substring(0, 20)}}{{item.title.length > 20?'...':''}}
							</p>
							<span v-show="modo2" @click="goModo2" class="modo">更多...</span>
						</view>
					</view>
					<view class="bodyt2-1-3">
						<view class="bodyt2-1-1-1-3">
							<view v-for="(item, index) in itemzz" :key="index" class="item"
								:class="{ active: isActivzz === index }" @click="setActivzzz(index)">
								{{ item.text }}
								<view v-if="isActivzz === index" class="arrow"></view>
							</view>
						</view>
						<!-- 					<view class="item active" style="width: 250px;text-align: left;">
						<span style="position: relative; left: 20px;">党建工作</span>
						<view class="arrow"></view>
					</view> -->
						<view class="bodyt2-1-1-3">
							<p @click="goDetails(item)" class="newsp" v-for="(item, index) in newsType.tempt3"
								:key="index">
								<span :class="index <3?'layui-badge':'layui-badge2'">{{index+1}}</span>
								{{item.title.substring(0, 11)}}{{item.title.length > 11?'...':''}}
							</p>
							<span v-show="modo3" @click="goModo3" class="modo" style="left: 200px;">更多...</span>
						</view>
					</view>
				</view>
				<view class="bodyt2-2 tddj" style="height: 50px;">
					<img @click="gohyfc()" style="margin: auto;width: 1200px;" src="../../static/imgs/hyzx.png">
				</view>
				<view class="bodyt2-2">
					<view id="colee_left" style="margin: auto; width: 1500px;overflow: hidden;">
						<table cellpadding="0">
							<tbody>
								<tr>
									<td id="colee_left1" valign="top">
										<table>
											<tbody>
												<tr align="center">
													<td class="tddj" @click="goDetails(item)"
														v-for="(item, index) in newsType.hyfc" :key="index">
														<img class="tt" :src="item.image1" />
														<span>{{item.zuozhe}}</span>
													</td>
												</tr>
											</tbody>
										</table>
									</td>
									<td id="colee_left2" valign="top">
									</td>
								</tr>
							</tbody>
						</table>
					</view>
				</view>
				<view class="bodyt3">
					<view class="bodyt33">
						<view class="bodyt3-1"
							style="position: relative;font-size: 22px;left: 60px;top:5px;color: #ba1c1b;">
							<span
								style="margin: 10px;font-size: 24px;font-family: '微软雅黑';color: #9f0810;font-weight: bold;">友情链接</span>
						</view>
						<view class="bodyt3-2"
							style="position: relative;font-size: 14px;left: 0px;top:0px;color: grey;">
							<a class="bodyt3-text link" v-for="(item, index) in newsType.yqlj" :key="index"
								:href="item.linkdizhi" target="_blank">{{item.title}}</a>
						</view>
					</view>
				</view>
			</view>
			<htmlFoot></htmlFoot>
		</view>
		<view v-show="temph5">
			<htmlHeadh5 class="aaz"></htmlHeadh5>
			<view class="apph5bodyt1">
				<view class="aazz">
				</view>
				<el-carousel :interval="5000" style="width: 100%;margin: auto;cursor: pointer;">
					<el-carousel-item v-for="(item, index) in newsType.sytw" :key="index">
						<!-- <img @click="goDetails(item)" style="width: 100%;height: 300px;" :src="item.image1"> -->
						<img style="width: 100%;height: 300px;" :src="item.image1" @click="onClick(item)">
					</el-carousel-item>
				</el-carousel>
				<view class="aazz1-1 bg-purple aazz1-1-t">
					<view class="box-title">新闻资讯</view>
					<img class="box-img" src="static/imgs/line.png">
					<view class="more" @click="gomore('xwzx','xwzx2')">更多</view>
				</view>
				<view class="aazz1-1 bg-purple">
					<uni-list>
						<uni-list-item v-for="(item, index) in newsType.xwzx" :key="index" link
							:title="item.title.length > appxwzc?item.title.substring(0, appxwzc)+'...':item.title.substring(0, appxwzc)"
							:note="vk.pubfn.timeFormat(item._add_time,'yyyy-MM-dd')+ '---阅读'+item.ydcs" clickable
							@click="onClick(item)" />
					</uni-list>
				</view>
				<view class="aazz1-1 bg-purple aazz1-1-t">
					<view class="box-title">协会文件</view>
					<img class="box-img" src="static/imgs/line.png">
					<view class="more" @click="gomore('xhwj','xhwj2')">更多</view>
				</view>
				<view class="aazz1-1 bg-purple">
					<uni-list>
						<uni-list-item v-for="(item, index) in newsType.xhwj" :key="index" link
							:title="item.title.length > appxwzc?item.title.substring(0, appxwzc)+'...':item.title.substring(0, appxwzc)"
							:note="vk.pubfn.timeFormat(item._add_time,'yyyy-MM-dd')+ '---阅读'+item.ydcs" clickable
							@click="onClick(item)" />
					</uni-list>
				</view>
				<view class="aazz1-1 bg-purple aazz1-1-t">
					<view class="box-title">党建工作</view>
					<img class="box-img" src="static/imgs/line.png">
					<view class="more" @click="gomore('djgz','djgz2')">更多</view>
				</view>
				<view class="aazz1-1 bg-purple">
					<uni-list>
						<uni-list-item v-for="(item, index) in newsType.djgz" :key="index" link
							:title="item.title.length > appxwzc?item.title.substring(0, appxwzc)+'...':item.title.substring(0, appxwzc)"
							:note="vk.pubfn.timeFormat(item._add_time,'yyyy-MM-dd')+ '---阅读'+item.ydcs" clickable
							@click="onClick(item)" />
					</uni-list>
				</view>
			</view>
			<htmlFooth5></htmlFooth5>
		</view>
	</view>
</template>


<script>
	import htmlHead from "@/components/html/html-head.vue";
	import htmlFoot from "@/components/html/html-foot.vue";
	import htmlHeadh5 from "@/components/html/html-headh5.vue";
	import htmlFooth5 from "@/components/html/html-footh5.vue";
	var vk = uni.vk;
	export default {
		components: {
			htmlHead,
			htmlFoot,
			htmlHeadh5,
			htmlFooth5
		},
		data() {
			// 页面数据变量
			return {
				appxwzc: 25,
				temppc: false,
				temph5: false,
				indexdata: 0,
				modee1: 'xwzx',
				modee2: 'xhwj',
				modo1: false,
				modo2: false,
				modo3: false,
				newsType: {
					sytw: [],
					xwzx: [],
					zcfg: [],
					llyj: [],
					xhwj: [],
					xhhd: [],
					mxrw: [],
					djgz: [],
					tzgg: [],
					hyfc: [],
					yqlj: [],
					tempt1: [],
					tempt2: [],
					tempt3: []
				},
				itemss: [{
						text: '新闻资讯'
					},
					{
						text: '政策法规'
					},
					// {
					// 	text: '理论研究'
					// },
				],
				items: [{
						text: '协会文件'
					},
					{
						text: '协会活动'
					},
					{
						text: '民校人物'
					},
				],
				itemzz: [{
						text: '党建工作'
					},
					{
						text: '通知公告'
					},
				],
				isActive: 0, // 用来记录当前哪个元素是激活的 
				isActivee: 0,
				isActivzz: 0,
				scrollTop: 0,
			}
		},
		onPageScroll(e) {
			//this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		async onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			await this.getNewsList();
			this.lbtinfo()
			this.whatScreen()
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {

		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {

		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {

		},
		// 监听 - 点击右上角转发时
		onShareAppMessage(options) {

		},
		// 函数
		methods: {
			onClick(item) {
				//console.log(item)
				// vk.navigateTo('/pages/ydd/details');
				vk.navigateTo({
					url: `/pages/ydd/details?tempid=`+item._id,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						update: (data) => {
							// 当B页面运行 eventChannel.emit('update', { a:1 }); 时，会运行这里的代码逻辑。

						}
					},
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('datas', item)
					}
				})
			},
			gomore(datas, xwlx) {
				//console.log(datas)
				vk.navigateTo('/pages/ydd/list?tempdata=' + datas + '&xwlx=' + xwlx);
			},
			whatScreen() {
				let width = document.querySelector("html").offsetWidth;
				if (width <= 768) {
					this.temph5 = true
					//console.log('去H5极小屏幕');
				} else {
					if (width > 768 && width <= 992) {
						console.log('去H5小屏幕');
					} else {
						if (width > 992 && width <= 1200) {
							console.log('去H5普通屏幕');
						} else {
							if (width > 1200) {
								this.temppc = true
								//console.log('去H5大屏幕');
							}
						}
					}
				}
			},
			lbtinfo() {
				var zichangdu = 1;
				var speed = 20;
				//速度数值越大速度越慢
				var colee_left2 = document.getElementById("colee_left2");
				var colee_left1 = document.getElementById("colee_left1");
				var colee_left = document.getElementById("colee_left");
				colee_left2.innerHTML = colee_left1.innerHTML;

				function Marquee3() {
					if (colee_left2.offsetWidth - colee_left.scrollLeft <= 0) { //offsetWidth 是对象的可见宽度
						colee_left.scrollLeft -= colee_left1.offsetWidth //scrollWidth 是对象的实际内容的宽，不包边线宽度
					} else {
						colee_left.scrollLeft++;
					}
				}
				var MyMar3 = setInterval(Marquee3, speed);

				// 鼠标移上scroll停止
				colee_left.onmouseover = function() {
					clearInterval(MyMar3);
				}
				// 移开轮播
				colee_left.onmouseout = function() {
					MyMar3 = setInterval(Marquee3, speed);
				}
			},
			gohyfc() {
				vk.navigateTo('/pages/modo/xwzx?tempdata=hyfc');
			},
			goDetails(item) {
				//console.log(item)
				if (item.nrtype.includes('djgz')) {
					vk.navigateTo('/pages/modo/djgz?tempdata=djgz&tempss=true&idd=' + item._id);
				} else if (item.nrtype.includes('xwzx')) {
					vk.navigateTo('/pages/modo/xwzx?tempdata=xwzx&tempss=true&idd=' + item._id);
				} else if (item.nrtype.includes('llyj')) {
					vk.navigateTo('/pages/modo/xwzx?tempdata=llyj&tempss=true&idd=' + item._id);
				} else if (item.nrtype.includes('zcfg')) {
					vk.navigateTo('/pages/modo/modo?tempdata=zcfg&tempss=true&idd=' + item._id);
				} else if (item.nrtype.includes('xhhd')) {
					vk.navigateTo('/pages/modo/xhhd?tempdata=xhhd&tempss=true&idd=' + item._id);
				} else if (item.nrtype.includes('mxrw')) {
					vk.navigateTo('/pages/modo/xwzx?tempdata=mxrw&tempss=true&idd=' + item._id);
				} else if (item.nrtype.includes('xhwj')) {
					vk.navigateTo('/pages/modo/xwzx?tempdata=xhwj&tempss=true&idd=' + item._id);
				} else if (item.nrtype.includes('sytw')) {
					vk.navigateTo('/pages/modo/xwzx?tempdata=sytw&tempss=true&idd=' + item._id);
				} else if (item.nrtype == 'hyfc') {
					if (item.linkdizhi) {
						window.open(item.linkdizhi)
					} else {
						vk.navigateTo('/pages/modo/xwzx?tempdata=hyfc&tempss=true&idd=' + item._id);
					}
				} else if (item.nrtype.includes('djgztzgg')) {
					vk.navigateTo('/pages/modo/djgz?tempdata=djgztzgg&tempss=true&idd=' + item._id);
				}
			},
			goModo1() {
				//vk.navigateTo('/pages/modo/modo?tempdata='+this.modee1);
				if (this.modee1 == 'zcfg') {
					vk.navigateTo('/pages/modo/modo?tempdata=' + this.modee1);
				} else {
					vk.navigateTo('/pages/modo/xwzx?tempdata=' + this.modee1);
				}
			},
			goModo2() {
				if (this.modee2 == 'xhhd') {
					vk.navigateTo('/pages/modo/xhhd?tempdata=' + this.modee2);
				} else {
					vk.navigateTo('/pages/modo/xwzx?tempdata=' + this.modee2);
				}
			},
			goModo3() {
				if (this.modee3 == 'djgz') {
					vk.navigateTo('/pages/modo/djgz?tempdata=djgz');
				} else {
					vk.navigateTo('/pages/modo/djgz?tempdata=djgztzgg');
				}

			},
			receiveFromChild(data) {
				console.log(data.message); // 输出: Hello, Parent!
			},
			handleChildEvent(data) {
				// 处理从子组件传递过来的数据  
				//console.log(data.message); // 输出: 这是来自子组件的消息  
				// console.log(data.message);
			},
			getNewsList() {
				// promise方式
				return vk.callFunction({
					url: 'client/hymbjy/pub/news.getNewsList',
					data: {}
				}).then((data) => {
					for (let i = 0; i < data.list.length; i++) {
						if (data.list[i].nrtype.includes('xwzx')) {
							if (this.newsType.xwzx.length < 7) {
								this.newsType.xwzx.push(data.list[i])
							}
						}
						if (data.list[i].nrtype.includes('zcfg')) {
							if (this.newsType.zcfg.length < 7) {
								this.newsType.zcfg.push(data.list[i])
							}
						}
						if (data.list[i].nrtype.includes('llyj')) {
							if (this.newsType.llyj.length < 7) {
								this.newsType.llyj.push(data.list[i])
							}
						}
						if (data.list[i].nrtype.includes('xhwj')) {
							if (this.newsType.xhwj.length < 7) {
								this.newsType.xhwj.push(data.list[i])
							}
						}
						if (data.list[i].nrtype.includes('xhhd')) {
							if (this.newsType.xhhd.length < 7) {
								this.newsType.xhhd.push(data.list[i])
							}
						}
						if (data.list[i].nrtype.includes('mxrw')) {
							if (this.newsType.mxrw.length < 7) {
								this.newsType.mxrw.push(data.list[i])
							}
						}
						if (data.list[i].nrtype.includes('djgz')) {
							if (this.newsType.djgz.length < 7) {
								this.newsType.djgz.push(data.list[i])
							}
						}
						if (data.list[i].nrtype.includes('djgztzgg')) {
							if (this.newsType.tzgg.length < 7) {
								this.newsType.tzgg.push(data.list[i])
							}
						}
						if (data.list[i].nrtype.includes('sytw')) {
							if (this.newsType.sytw.length < 7) {
								this.newsType.sytw.push(data.list[i])
							}
						}
						if (data.list[i].nrtype.includes('sytw')) {
							if (this.newsType.sytw.length < 7) {
								this.newsType.sytw.push(data.list[i])
							}
						}
						if (data.list[i].nrtype.includes('hyfc')) {
							this.newsType.hyfc.push(data.list[i])
						}
						if (data.list[i].nrtype.includes('yqlj')) {
							this.newsType.yqlj.push(data.list[i])
						}
					}

					//
					this.newsType.tempt1 = this.newsType.xwzx
					this.newsType.tempt1.length >= 7 ? this.modo1 = true : this.modo1 = false
					//
					this.newsType.tempt2 = this.newsType.xhwj
					this.newsType.tempt2.length >= 7 ? this.modo2 = true : this.modo2 = false
					//
					this.newsType.tempt3 = this.newsType.djgz
					this.newsType.djgz.length >= 7 ? this.modo3 = true : this.modo3 = false
				}).catch((err) => {

				});
			},
			setActivee(index) {
				this.isActive = index;
				if (this.isActive == 0) {
					this.newsType.tempt2 = this.newsType.xhwj
					this.modee2 = 'xhwj'
				} else if (this.isActive == 1) {
					this.newsType.tempt2 = this.newsType.xhhd
					this.modee2 = 'xhhd'
				} else if (this.isActive == 2) {
					this.newsType.tempt2 = this.newsType.mxrw
					this.modee2 = 'mxrw'
				}
				this.newsType.tempt2.length >= 7 ? this.modo2 = true : this.modo2 = false
			},
			setActiveee(index) {
				this.isActivee = index;
				if (this.isActivee == 0) {
					this.newsType.tempt1 = this.newsType.xwzx
					this.modee1 = 'xwzx'
				} else if (this.isActivee == 1) {
					this.newsType.tempt1 = this.newsType.zcfg
					this.modee1 = 'zcfg'
				} else if (this.isActivee == 2) {
					this.newsType.tempt1 = this.newsType.llyj
					this.modee1 = 'llyj'
				}
				this.newsType.tempt1.length >= 7 ? this.modo1 = true : this.modo1 = false
			},
			setActivzzz(index) {
				this.isActivzz = index;
				if (this.isActivzz == 0) {
					this.newsType.tempt3 = this.newsType.djgz
					this.modee3 = 'djgz'
				} else if (this.isActivzz == 1) {
					this.newsType.tempt3 = this.newsType.tzgg
					this.modee3 = 'tzgg'
				}
				this.newsType.tempt3.length >= 7 ? this.modo3 = true : this.modo3 = false
			},
		},
		// 监听器
		watch: {

		},
		// 计算属性
		computed: {

		}
	}
</script>
<style lang="scss" scoped>
	.box-title {
		display: inline-block;
		vertical-align: -webkit-baseline-middle;
		// font-size: .32rem;
		color: #333;
		font-weight: 700;
		margin-left: 5px;
	}

	.box-img {
		height: 0.8rem;
		display: inline-block;
		vertical-align: -webkit-baseline-middle;
	}

	.more {
		line-height: 5px;
		color: #666;
		position: relative;
		margin-right: 5px;
	}

	.aaz {
		z-index: 100;
		min-height: 10px;
		position: fixed;
		width: 100%;
	}

	.aazz {
		height: 148px;
		width: 100%;
	}

	.aazz1 {
		height: 380px;
		width: 100%;
		// background-color: khaki;
	}

	.aazz1-1 {
		//border-radius: 4px;
		min-height: 36px;
		// background-color: khaki;
	}

	.aazz1-1-t {
		margin: 5px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}

	.apph5bodyt1 {
		min-height: 1500px;
	}








	.tt {
		width: 280px;
		height: 180px;
		margin-left: 16px;
		margin-right: 16px;
		margin-top: 10px;
		display: block;
		transition: 0.5s;
		margin-bottom: 10px;
	}

	.tt:hover {
		transform: scale(1.1);
		/* 放大到1.2倍 */
	}

	.newsp {
		line-height: 1.5;
		font-size: 16px;
		margin: 5px 0px;
	}

	.newsp:hover {
		color: #ba1c1b;
		/* 鼠标划入时的背景颜色 */
	}

	.modo {
		position: relative;
		left: 380px;
		cursor: pointer;
		font-size: 16px;
	}

	.modo:hover {
		color: #ba1c1b;
		/* 鼠标划入时的背景颜色 */
	}

	.layui-badge {
		position: relative;
		display: inline-block;
		padding: 0 6px;
		font-size: 16px;
		text-align: center;
		background-color: #ff5722;
		color: #fff;
		border-radius: 2px;
		margin-right: 10px;
		margin-left: 10px;
	}

	.layui-badge2 {
		position: relative;
		display: inline-block;
		padding: 0 6px;
		font-size: 16px;
		text-align: center;
		background-color: #bcbcbc;
		color: #fff;
		border-radius: 2px;
		margin-right: 10px;
		margin-left: 10px;

	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.horizontal-list {
		list-style-type: none;
		/* 移除默认的列表样式 */
		padding: 0;
		/* 移除默认的内边距 */
	}

	.horizontal-list li {
		display: inline-block;
		margin-right: 10px;
		/* 添加右侧外边距，用于分隔列表项 */
	}

	.uni-swiper-dot-box {
		margin: auto;
		width: 1700px;
		height: 380px;
		margin-top: 8px;
		background-color: #f5f5f5;
	}

	.swiper-box {
		width: 1700px;
		height: 380px;
	}

	.swiper-item {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 1700px;
		height: 380px;
		color: #fff;
	}

	.tddj {
		cursor: pointer;
	}

	text {
		cursor: pointer;
	}

	p {
		cursor: pointer;
	}

	.bodyt1 {
		background-color: white;
		width: 1800px;
		height: 40px;
	}

	.bodyt2 {
		margin: auto;
		background-color: #f5f5f5;
		width: 1900px;
		min-height: 1072px;
	}

	.bodyt2-1 {
		margin: auto;
		background-color: #f5f5f5;
		width: 1200px;
		height: 310px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: flex-start;
		align-items: stretch;
	}

	.newstype1 {
		color: #000;
		background-color: white;
		font-size: 20px;
		height: 30px;
		width: 110px;
		text-align: center;
		cursor: pointer;
		position: relative;
		margin-bottom: 40px;
	}

	.newstype1.active {
		background-color: #ba1c1b;
		/* 激活状态的背景色 */
		color: #fff;
	}

	.item {
		color: #000;
		font-size: 18px;
		text-align: center;
		height: 30px;
		width: 255px;
		padding: 10px;
		margin-bottom: 10px;
		background-color: white;
		cursor: pointer;
		position: relative;
	}

	.itemzz {
		color: #000;
		font-size: 18px;
		text-align: center;
		height: 30px;
		width: 115px;
		padding: 10px;
		margin-bottom: 10px;
		background-color: white;
		cursor: pointer;
		position: relative;
	}

	.item.active {
		background-color: #ba1c1b;
		/* 激活状态的背景色 */
		color: #fff;
	}

	.arrow {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		/* 居中显示 */
		width: 0;
		height: 0;
		border: 10px solid transparent;
		border-top-color: #ba1c1b;
		border-bottom: 0;
		border-right-color: transparent;
		border-left-color: transparent;
		margin-bottom: -10px;
		/* 稍微上移一些，让箭头紧贴着div底部 */
	}


	.bodyt2-1-1 {
		background-color: white;
		width: 450px;
		height: 300px;
		margin-right: 15px;
		border-radius: 5px;
	}

	.bodyt2-1-1-1 {
		width: 450px;
		height: 60px;
		background-color: white;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-evenly;
		align-items: center;
		align-content: center;
	}

	.bodyt2-1-1-1-3 {
		width: 270px;
		height: 60px;
		background-color: white;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-evenly;
		align-items: center;
		align-content: center;
	}

	.bodyt2-1-1-2 {
		width: 450px;
		height: 240px;
		background-color: white;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.bodyt2-1-1-3 {
		width: 270px;
		height: 240px;
		background-color: white;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}


	.bodyt2-1-2 {
		background-color: white;
		width: 450px;
		height: 360px;
		margin-right: 15px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: flex-start;
	}

	.bodyt2-1-3 {
		background-color: white;
		width: 270px;
		height: 300px;
	}

	.bodyt2-2 {
		margin: auto;
		background-color: #f5f5f5;
		width: 1200px;
		height: 240px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-evenly;
		align-items: center;
	}

	.bodyt2-2img {
		width: 290px;
		height: 130px;
	}

	.bodyt2-2-1 {
		background-color: #f5f5f5;
		width: 300px;
		height: 160px;
	}

	.bodyt2-2-2 {
		background-color: #f5f5f5;
		width: 300px;
		height: 160px;
	}

	.bodyt2-2-3 {
		background-color: #f5f5f5;
		width: 300px;
		height: 160px;
	}

	.bodyt2-2-4 {
		background-color: #f5f5f5;
		width: 300px;
		height: 160px;
	}

	.bodyt3 {
		margin: auto;
		background-color: white;
		width: 2000px;
		height: 120px;
		position: relative;
		bottom: 0;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: flex-start;
		justify-content: flex-start;
		align-items: center;
	}

	.bodyt33 {
		margin: auto;
		width: 1200px;
		display: flex;
	}

	.bodyt3-1 {
		width: 15%;
		height: 120px;
		//background-color: #ff5722;
	}

	.bodyt3-2 {
		width: 85%;
		height: 120px;
		//background-color: burlywood;
	}

	.bodyt3-text {
		position: relative;
		margin-top: 5px;
		margin-left: 30px;
		top: 0px;
		color: grey;
	}

	.bodyt3-text:hover {
		color: #ba1c1b;
		/* 鼠标划入时的背景颜色 */
	}

	.bodyt2-2p {
		text-align: center;
	}

	a {
		text-decoration: none;
	}

	.link {
		display: inline-block;
		color: #666;
		font: 16px / 30px "微软雅黑";
		padding-right: 25px;
	}

	.el-row {
		margin-bottom: 0px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		//background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>